<!--
 * @Autor: 王琛
 * @Description: 子导航承载组件
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#childNav {
  width: calc(100% - 20px);
  height: 100%;
  position: relative;
  padding: 5px 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .7);
  border-radius: 5px;
  margin: 0 auto;

  .childNav {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  .childNav_children {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px
  }
}
</style>


<template>
  <!-- 主内容 -->
  <div id="childNav" ref="childNav">
    <!-- 主容器 -->
    <div class="childNav">
      <menuScrollContainer :col='_props.config.length' ref="childNavScoll">
        <component v-for="(item,index) in _props.config || []" :key="index" :is="btn_list[_props.btnTag]" :config="item" :isSelect="_data.selectIndex == index" @click="clickMenu({ item,index,$event })"></component>
      </menuScrollContainer>
    </div>
  </div>

</template>


<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import { emitter } from "tool";

import textNav from "./childNav/textNav.vue";
import imgText from "./childNav/imgText.vue";
// 引入导航滚动组件
import menuScrollContainer from "src/components/menuScrollContainer.vue";

const _props = defineProps({
  //数据配置
  config: {
    type: Array,
    default: () => {
      return [];
    }
  },
  // 按钮所用的标签
  btnTag: {
    type: String,
    default: "textNav"
  }
})
const btn_list = {textNav, imgText}
const childNavScoll = ref(null);
const _data = reactive({
  // 当前选中的索引
  selectIndex: 0
});
// 获取主要容器高度
const childNav = ref(null);
defineExpose({_data})
const _emit = defineEmits(['boxHeight', 'clickToGiveBack'])
onMounted(() => {
  nextTick(() => {
    init()
  })
})
/**
 * @description: 初始化函数
 * @author: 王琛
 * @Date: 2022-07-20 10:53:03
 * @param {*}
 * @return {*}
 */
function init() {
  _emit("boxHeight", childNav.value.clientHeight + 5);
}

/**
 * @description: 点击菜单
 * @author: 王琛
 * @Date: 2022-07-20 17:17:47
 * @param {*}
 * @return {*}
 */
function clickMenu({item, index, $event}) {
  childNavScoll.value.subNavigationScroll({childEvent: $event});
  // 判断如果选择的相同的自不执行操作
  if (_data.selectIndex == index) return;
  // 更新标识
  _data.selectIndex = index;
  // 告诉父级导航我点击了
  _emit("clickToGiveBack", {item, index});
}

</script>

